<script>
import DateUtils from "./DateUtils.vue"
export default {
  name: "HomePage",
  components:{DateUtils},
  data() {
    return {
      user:{}
    }
  },
  computed:{

  },
  methods:{
    init(){
      try {
        this.user = JSON.parse(sessionStorage.getItem('CurUser'));
      } catch (e) {
        console.error("Failed to parse user data from sessionStorage", e);
      }
    }
  },
  mounted() {
    this.init();
  }

}
</script>

<template>
  <div>
    <div class="container" style="width: 100%; height: 100%;">
      <h1>{{"欢迎你！"+user.name}}</h1>
      <el-descriptions :title="个人中心" :column="2" size="small" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user-solid"></i>
            账号
          </template>
          {{user.no}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone"></i>
            手机号
          </template>
            {{user.phoneNum}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-opportunity"></i>
            性别
          </template>
           <el-tag :type="user.sex === 1 ? 'primary' : 'danger'">
             <i :class="user.sex === 1 ? 'el-icon-male' : 'el-icon-female'"></i>
             {{user.sex === 1 ?"男":"女"}}
           </el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            角色
          </template>
          <el-tag
              type="success"
              disable-transitions>
            {{user.roleId==0?"超级管理员":(user.roleId==1?"管理员":"普通用户")}}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tableware"></i>
            年龄
          </template>
          {{user.age}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            邮箱
          </template>
          {{user.email}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            联系地址
          </template>
          {{user.address}}
        </el-descriptions-item>
      </el-descriptions>
      <div style="font-size: larger; width: 50%; margin: 0 auto">
        <DateUtils></DateUtils>
      </div>
    </div>

  </div>
</template>

<style scoped>
.container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
  text-align: center;
  color: #333;
}
p {
  line-height: 1.6;
  color: #666;
}

.info-section p {
  margin: 5px 0;
}
</style>